<template>
  <div>
    <h1>App</h1>
    <TsCard>

      <!-- <template v-slot:default="props"> -->
      <!-- <template v-slot="props"> -->
      <template #default="props">
        <h3>this is title {{ props.sname }}</h3>
        <p>this is for {{ username }}</p>
        <p>{{ props }}</p>
      </template>

      <template #s1="props">
        <h3>this is title {{ props.sname }}</h3>
        <p>this is for {{ username }}</p>
        <p>{{ props }}</p>
      </template>

      <!-- 解构 -->
      <!-- <template v-slot:s2="{ sname, count }"> -->
      <template #s2="{ sname, count }">
        <h3>this is title {{ sname }}</h3>
        <p>this is for {{ username }}</p>
        <p>{{ count }}</p>
      </template>

      <template v-slot:[slotName]="props">
        <h3>this is title {{ props.sname }}</h3>
        <p>this is for {{ username }}</p>
        <p>{{ props }}</p>
      </template>
    </TsCard>

  </div>
</template>
<script>
import TsCard from './TsCard.vue';
export default {
  data() {
    return { username: 'jack', slotName: 's3' };
  },
  components: {
    TsCard,
  }
};
</script>

<style>
div {
  border: solid 1px;
  padding: 10px;
}
</style>